<template>
  <el-dialog
    v-model="visible"
    title="批量操作"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="true"
    @close="handleClose"
  >
    <div class="batch-operations-content">
      <!-- 已选择供应商信息 -->
      <div class="selected-info">
        <div class="info-title">已选择 {{ selectedSuppliers.length }} 个供应商：</div>
        <div class="supplier-list">
          <el-scrollbar max-height="200px">
            <div 
              v-for="supplier in selectedSuppliers" 
              :key="supplier.id" 
              class="supplier-item"
            >
              <el-tag type="info" size="small">{{ supplier.name }}</el-tag>
            </div>
          </el-scrollbar>
        </div>
      </div>

      <!-- 操作按钮区域 -->
      <div class="operation-buttons">
        <el-button 
          type="success" 
          size="large" 
          @click="handleBatchActivate"
          :loading="loadingStates.activate"
        >
          <el-icon><Check /></el-icon>
          批量激活
        </el-button>
        <el-button 
          type="warning" 
          size="large" 
          @click="handleBatchDeactivate"
          :loading="loadingStates.deactivate"
        >
          <el-icon><Close /></el-icon>
          批量停用
        </el-button>
        <el-button 
          type="danger" 
          size="large" 
          @click="handleBatchDelete"
          :loading="loadingStates.delete"
        >
          <el-icon><Delete /></el-icon>
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Check, Close, Delete } from '@element-plus/icons-vue'
import * as procurementAPI from '@/api/procurement'

// 定义供应商接口
interface Supplier {
  id: number
  name: string
  [key: string]: any
}

// 定义props
const props = defineProps<{
  modelValue: boolean
  selectedSuppliers: Supplier[]
}>()

// 定义emits
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
  (e: 'close'): void
}>()

// 响应式数据
const visible = ref(false)
const loadingStates = reactive({
  activate: false,
  deactivate: false,
  delete: false
})

// 监听modelValue变化
watch(() => props.modelValue, (newVal: boolean) => {
  visible.value = newVal
})

// 监听visible变化
watch(visible, (newVal: boolean) => {
  emit('update:modelValue', newVal)
  if (!newVal) {
    // 重置加载状态
    Object.assign(loadingStates, {
      activate: false,
      deactivate: false,
      delete: false
    })
  }
})

// 关闭弹窗
const handleClose = () => {
  visible.value = false
  emit('close')
}

// 批量激活供应商
const handleBatchActivate = async () => {
  if (props.selectedSuppliers.length === 0) {
    ElMessage.warning('请先选择供应商')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要激活选中的 ${props.selectedSuppliers.length} 个供应商吗？`, 
      '批量激活确认', 
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    loadingStates.activate = true
    const ids = props.selectedSuppliers.map((supplier: Supplier) => supplier.id)
    await procurementAPI.batchActivateSuppliers(ids)
    ElMessage.success('批量激活成功')
    handleClose()
    emit('success')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量激活失败: ' + (error as Error).message)
    }
  } finally {
    loadingStates.activate = false
  }
}

// 批量停用供应商
const handleBatchDeactivate = async () => {
  if (props.selectedSuppliers.length === 0) {
    ElMessage.warning('请先选择供应商')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要停用选中的 ${props.selectedSuppliers.length} 个供应商吗？`, 
      '批量停用确认', 
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    loadingStates.deactivate = true
    const ids = props.selectedSuppliers.map((supplier: Supplier) => supplier.id)
    await procurementAPI.batchDeactivateSuppliers(ids)
    ElMessage.success('批量停用成功')
    handleClose()
    emit('success')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量停用失败: ' + (error as Error).message)
    }
  } finally {
    loadingStates.deactivate = false
  }
}

// 批量删除供应商
const handleBatchDelete = async () => {
  if (props.selectedSuppliers.length === 0) {
    ElMessage.warning('请先选择供应商')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${props.selectedSuppliers.length} 个供应商吗？`, 
      '批量删除确认', 
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    loadingStates.delete = true
    const ids = props.selectedSuppliers.map((supplier: Supplier) => supplier.id)
    await procurementAPI.batchDeleteSuppliers(ids)
    ElMessage.success('批量删除成功')
    handleClose()
    emit('success')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量删除失败: ' + (error as Error).message)
    }
  } finally {
    loadingStates.delete = false
  }
}
</script>

<style scoped lang="scss">
.batch-operations-content {
  .selected-info {
    margin-bottom: 20px;
    
    .info-title {
      font-weight: 600;
      margin-bottom: 10px;
      color: #303133;
    }
    
    .supplier-list {
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      padding: 10px;
      background-color: #f5f7fa;
      
      .supplier-item {
        margin-bottom: 5px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  
  .operation-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    
    .el-button {
      width: 100%;
      justify-content: center;
      gap: 8px;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>